<!-- components/CarForm.vue -->
<template>
  <u-form class="form-content">
    <!-- 人员姓名输入 -->
    <u-form-item label="人员姓名" class="form-item" label-width="120">
      <u-input
        v-model="localFormData.name"
        placeholder="请输入人员姓名"
        class="custom-input"
        @input="updateFormData"
      />
    </u-form-item>
    <u-form-item label="从业资格证号" class="form-item" label-width="120">
      <u-input
        v-model="localFormData.transportNumber"
        placeholder="请输入从业资格证号"
        class="custom-input"
        @input="updateFormData"
      />
    </u-form-item>
  </u-form>
</template>

<script>
export default {
  props: {
    formData: Object,
    list: Array,
    title: String,
    plateColorPickerVisible: Boolean,
  },
  data() {
    return {
      localFormData: { ...this.formData },
    };
  },
  watch: {
    formData: {
      handler(newVal) {
        this.localFormData = { ...newVal };
      },
      deep: true,
    },
  },
  methods: {
    updateFormData() {
      this.$emit("update:formData", { ...this.localFormData });
    },
    changeOpenCarColor() {
      this.$refs.carPicker._open();
    },
    closeCarPicker() {
      this.$refs.carPicker._close();
    },
    confirmCarPicker(checkedValue) {
      this.localFormData.plateColor = checkedValue;
      this.updateFormData();
    },
  },
};
</script>

<style scoped lang="scss">
.form-content {
  background-color: #ffffff;
  padding: 0;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-item {
  padding: 0 10px;
  border-bottom: 1px solid #f1f1f1;
}

.custom-input {
  border: none;
  background-color: transparent;
}

.arrow-icon-groud {
  position: relative;
  flex: 1;

  .arrow-icon {
    position: absolute !important;
    right: 20px;
    top: 10px;
  }
}
</style>
